<template>
	<div>
		<!-- 面板写导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }"
				>首页</el-breadcrumb-item
			>
			<el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
			<el-breadcrumb-item><a href="/">用户列表</a></el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card>
            <el-row :gutter='20'>
                <el-col :span='8'><el-input
				placeholder="请输入内容">
				<el-button slot="append" icon="el-icon-search"></el-button>
			</el-input></el-col>
                <el-col :span='3'>
                    <el-button type='primary'>添加用户</el-button>
                </el-col>
            </el-row>
            <!-- 用户列表 -->
             <el-table :data='userList' border stripe>
                 <el-table-column label="姓名" prop="username">
                 </el-table-column>
                   <el-table-column label="邮箱" prop="email">
                 </el-table-column>
                   <el-table-column label="电话" prop="mobile">
                 </el-table-column>
                   <el-table-column label="角色" prop="role_name">
                 </el-table-column>
                  <el-table-column label="状态" prop="mg_state">
                 </el-table-column>
                  <el-table-column label="操作" >
                 </el-table-column>
             </el-table>
		</el-card>
	</div>
</template>

<script>
	export default {
        data() {
            return{
                //获取用户列表的参数对象 
                queryInfo:{
                    query:'',
                    pagenum:1,
                    pagesize:10
                },
                userList:[],
                total:0
            }
        },
        created() {
            this.getUserList()
        },
        methods:{
           async getUserList() {
               const {data:res} =await this.$http.get('/users',{params:this.queryInfo})
               console.log(res)
               if(res.meta.status !==200) return this.$message.error('用户列表获取失败')
               this.userList = res.data.users
               this.total = res.data.total
            }
        }
    };
</script>

<style lang='less' scoped>
</style>